<template>
	<view class="container">
		<!-- 侧边栏 -->
		<view class="sidebar">
			<view class="sidebar-header">
				<image class="logo" src="/static/logo.png"></image>
				<view class="system-name">后台管理系统</view>
			</view>
			
			<view class="sidebar-menu">
				<view 
					v-for="(item, index) in menuItems" 
					:key="index"
					class="menu-item"
					:class="{ active: currentMenu === item.key }"
					@click="switchMenu(item.key)"
				>
					<text class="menu-icon">{{ item.icon }}</text>
					<text class="menu-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 顶部栏 -->
			<view class="top-bar">
				<view class="page-title">{{ currentPageTitle }}</view>
				<view class="user-info" @click="showUserMenu = !showUserMenu">
					<text class="username">{{ userInfo.username }}</text>
					<text class="role-tag">管理员</text>
					<text class="user-icon">▼</text>
					
					<!-- 用户菜单 -->
					<view class="user-menu" v-if="showUserMenu">
						<view class="menu-item" @click="logout">
							<text>退出登录</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 内容区域 -->
			<view class="content-area">
				<!-- 根据当前菜单显示不同组件 -->
				<Dashboard v-if="currentMenu === 'dashboard'" />
				<CustomerServiceDashboard v-if="currentMenu === 'customer_dashboard'" />
				<CustomerServiceList v-if="currentMenu === 'service'" />
				<CustomerServiceStats v-if="currentMenu === 'stats'" />
				<ChatSessionList v-if="currentMenu === 'sessions'" />
				<SessionTransferList v-if="currentMenu === 'transfers'" />
				<UserList v-if="currentMenu === 'users'" />
				<RoleList v-if="currentMenu === 'roles'" />
				<ChatMonitor v-if="currentMenu === 'monitor'" />
				<SystemSettings v-if="currentMenu === 'system_settings'" />
			</view>
		</view>
	</view>
</template>

<script>
	// 导入子组件
	import Dashboard from '../../components/Dashboard.vue';
	import CustomerServiceList from '../../components/CustomerServiceList.vue';
	import CustomerServiceStats from '../../components/CustomerServiceStats.vue';
	import ChatSessionList from '../../components/ChatSessionList.vue';
	import SessionTransferList from '../../components/SessionTransferList.vue';
	import ChatMonitor from '../../components/ChatMonitor.vue';
	import PageHeader from '../../components/PageHeader.vue';
	import RoleList from '../../components/RoleList.vue';
	import UserList from '../../pages/user/list.vue';
	import CustomerServiceDashboard from '../../pages/customer-service/dashboard.vue';
	import SystemSettings from '../../pages/system/settings.vue';
	import { isAdmin, redirectToNoPermission } from '@/utils/permission.js';
	import api from '@/api/index.js';
	
	export default {
		components: {
			Dashboard,
			CustomerServiceList,
			CustomerServiceStats,
			ChatSessionList,
			SessionTransferList,
			CustomerServiceDashboard,
			UserList,
			RoleList,
			PageHeader,
			ChatMonitor,
			SystemSettings
		},
		data() {
			return {
				userInfo: {
					username: '管理员'
				},
				showUserMenu: false,
				currentMenu: 'dashboard',
				menuItems: [
					{
						key: 'dashboard',
						text: '控制台',
						icon: '📊'
					},
					{
						key: 'customer_dashboard',
						text: '客服仪表盘',
						icon: '🔍'
					},
					{
						key: 'service',
						text: '客服管理',
						icon: '👥'
					},
					{
						key: 'stats',
						text: '工作统计',
						icon: '📈'
					},
					{
						key: 'sessions',
						text: '会话管理',
						icon: '💬'
					},
					{
						key: 'transfers',
						text: '转接管理',
						icon: '🔄'
					},
					{
						key: 'roles',
						text: '角色管理',
						icon: '🔐'
					},
					{
						key: 'users',
						text: '用户管理',
						icon: '👤'
					},
					{
						key: 'system_settings',
						text: '系统设置',
						icon: '⚙️'
					},
					{
						key: 'chatbot_settings',
						text: '机器人设置',
						icon: '🤖'
					},
					{
						key: 'monitor',
						text: '聊天监控',
						icon: '👁️'
					}
				]
			}
		},
		computed: {
			currentPageTitle() {
				const menuItem = this.menuItems.find(item => item.key === this.currentMenu);
				return menuItem ? menuItem.text : '';
			}
		},
		onLoad() {
			// 检查管理员权限
			if (!isAdmin()) {
				redirectToNoPermission();
				return;
			}
			
			// 获取管理员信息
			this.getAdminInfo();
		},
		methods: {
			async getAdminInfo() {
				try {
					const res = await api.auth.getAdminInfo()
					if (res.code === 200) {
						this.userInfo = res.data
					}
				} catch (err) {
					uni.showToast({
						title: '获取管理员信息失败',
						icon: 'none'
					})
				}
			},
			switchMenu(key) {
				this.currentMenu = key;
				this.showUserMenu = false;
			},
			async logout() {
				// 检查是否有token
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.showToast({
						title: '登录已失效，请重新登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1500);
					return;
				}

				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await api.auth.logout();
								// 清除本地存储
								uni.removeStorageSync('token');
								uni.removeStorageSync('userRoles');
								uni.removeStorageSync('userInfo');
								
								// 跳转到登录页
								uni.reLaunch({
									url: '/pages/login/login'
								});
							} catch (err) {
								console.error('退出登录失败:', err);
								// 如果退出失败，也清除本地存储并跳转到登录页
								uni.removeStorageSync('token');
								uni.removeStorageSync('userRoles');
								uni.removeStorageSync('userInfo');
								
								uni.showToast({
									title: err.message || '退出登录失败',
									icon: 'none'
								});
								
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}, 1500);
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	height: 100vh;
	background: #f5f7fa;
	font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

/* 侧边栏 */
.sidebar {
	width: 220px;
	background: linear-gradient(135deg, #0d47a1, #1e88e5); /* 哆啦A梦深蓝色渐变 */
	color: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 2px 0 8px rgba(13, 71, 161, 0.1);
	transition: width 0.2s;
}

.sidebar-header {
	display: flex;
	align-items: center;
	padding: 32px 24px 24px 24px;
	border-bottom: 1px solid #4f5bbd;
}

.logo {
	width: 40px;
	height: 40px;
	margin-right: 12px;
	border-radius: 8px;
	background: #fff;
}

.system-name {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	letter-spacing: 2px;
	transition: opacity 0.2s;
}

.sidebar-menu {
	flex: 1;
	padding: 24px 0;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 12px 32px;
	font-size: 16px;
	color: #c7d0f7;
	cursor: pointer;
	border-left: 4px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.menu-item .menu-icon {
	margin-right: 12px;
	font-size: 18px;
	transition: margin 0.2s;
}

.menu-item.active {
	background: #e3e7f7;
	color: #3f51b5;
	border-left: 4px solid #2196f3;
	font-weight: bold;
}

.menu-item.active .menu-icon {
	color: #2196f3;
}

.menu-item:hover {
	background: #4f5bbd;
	color: #fff;
}

/* 主内容区 */
.main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #f5f7fa;
}

.top-bar {
	height: 64px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	box-shadow: 0 2px 8px rgba(13, 71, 161, 0.05);
	border-bottom: 1px solid #e3e7f7;
}

.page-title {
	font-size: 22px;
	font-weight: 600;
	color: #222;
	letter-spacing: 1px;
}

.user-info {
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	color: #3f51b5;
	font-size: 16px;
}

.username {
	margin-right: 8px;
	font-weight: 500;
}

.role-tag {
	background: #e3e7f7;
	color: #3f51b5;
	border-radius: 8px;
	padding: 2px 8px;
	margin-right: 8px;
	font-size: 13px;
}

.user-icon {
	font-size: 12px;
}

.user-menu {
	position: absolute;
	top: 40px;
	right: 0;
	background: #fff;
	box-shadow: 0 2px 8px rgba(63,81,181,0.08);
	border-radius: 6px;
	min-width: 120px;
	z-index: 10;
	padding: 8px 0;
}

.user-menu .menu-item {
	color: #3f51b5;
	padding: 10px 20px;
	border: none;
	background: none;
	font-size: 15px;
}

.user-menu .menu-item:hover {
	background: #e3e7f7;
	color: #2196f3;
}

.content-area {
	flex: 1;
	padding: 32px;
	background: #f5f7fa;
	overflow-y: auto;
	position: relative;
}

/* 波浪背景元素 */
.content-area::before {
	content: '';
	position: fixed;
	top: -100px;
	right: -100px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(68, 129, 235, 0.1) 0%, rgba(4, 190, 254, 0.1) 100%);
	z-index: -1;
}

.content-area::after {
	content: '';
	position: fixed;
	bottom: -100px;
	left: -100px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: linear-gradient(45deg, rgba(68, 129, 235, 0.05) 0%, rgba(4, 190, 254, 0.05) 100%);
	z-index: -1;
}

/* 动画 */
.content-area > * {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 响应式调整 */
@media screen and (max-width: 900px) {
	.container {
		flex-direction: column;
	}
	.sidebar {
		flex-direction: row;
		width: 100vw;
		height: 56px;
		box-shadow: 0 2px 8px rgba(63,81,181,0.08);
		border-bottom: 1px solid #4f5bbd;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	.sidebar-header {
		display: none;
	}
	.sidebar-menu {
		display: flex;
		flex-direction: row;
		padding: 0;
		width: 100vw;
		overflow-x: auto;
	}
	.menu-item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
		font-size: 14px;
		border-left: none;
		border-bottom: 4px solid transparent;
		height: 56px;
		min-width: 60px;
	}
	.menu-item .menu-icon {
		margin: 0;
		font-size: 20px;
	}
	.menu-item .menu-text {
		font-size: 12px;
		margin-top: 2px;
	}
	.menu-item.active {
		background: #e3e7f7;
		color: #3f51b5;
		border-bottom: 4px solid #2196f3;
		border-left: none;
	}
	.main-content {
		margin-top: 56px;
	}
	.content-area {
		padding: 12px;
	}
	.top-bar {
		padding: 0 10px;
		height: 48px;
	}
	.page-title {
		font-size: 16px;
	}
	.user-info {
		font-size: 14px;
	}
	.role-tag {
		font-size: 11px;
		padding: 1px 5px;
	}
}

/* 手机端极窄屏适配 */
@media screen and (max-width: 500px) {
	.content-area {
		padding: 4px;
	}
	.main-content {
		margin-top: 56px;
	}
	.sidebar {
		height: 48px;
	}
	.menu-item {
		min-width: 44px;
		font-size: 12px;
		height: 48px;
	}
	.menu-item .menu-icon {
		font-size: 16px;
	}
}
</style>
